前后端分离nginx配置，同时解决跨域问题

您所在的位置：网站首页 › nginx 解决跨域 › 前后端分离nginx配置，同时解决跨域问题

前后端分离nginx配置，同时解决跨域问题

2023-09-28 14:10| 来源: 网络整理| 查看: 265

背景

现在，web开发的前后端分离技术越来越火爆，由于最近的公司官网使用了前后端分离的方案，这里就来记录一下前后端分离的项目部署。这里我们使用的前端框架是Vue.js，后台使用Laravel7提供数据接口。

Nginx

nginx (engine x) 是一个高性能的HTTP和反向代理服务器,这里我们使用nginx来作为前端页面的静态服务器。

思路前端部署

nginx作为静态服务器部署前端代码

后端部署

nginx配置不同端口的后台服务器部署接口代码

nginx反向代理

将发往nginx服务器的数据请求发送到后台端口

代码worker_processes 1; events { worker_connections 1024; } http { include mime.types; default_type application/octet-stream; sendfile on; keepalive_timeout 65; server { listen 80; server_name tosim.top; location / { root html/build; try_files $uri /index.html; # try_files：检查文件； $uri：监测的文件路径； /index.html：文件不存在重定向的新路径 index index.html; } location /api/ { # 把 /api 路径下的请求转发给真正的后端服务器 proxy_pass http://localhost:18080/; # 把host头传过去，后端服务程序将收到your.domain.name, 否则收到的是localhost:18080 proxy_set_header Host $http_host; # 把cookie中的path部分从/api替换成/service proxy_cookie_path /api /; # 把cookie的path部分从localhost:18080替换成your.domain.name proxy_cookie_domain localhost:18080 tosim.top; } error_page 500 502 503 504 /50x.html; location = /50x.html { root html; } } }

【本文地址】

前后端分离nginx配置，同时解决跨域问题

前后端分离nginx配置，同时解决跨域问题

今日新闻

推荐新闻